<template>
  <div class="login">
    <div class="box">
      <div class="box2">
        <div class="logo">
          <img src="@/assets/logo.png" alt="">
        </div>
        <div class="from">
          <el-form :model="form" status-icon :form="form" ref="form" class="demo-form">
            <el-form-item prop="user">
              <div class="inputBox">
                <div class="icon">
                  <img src="@/assets/loginUser.png" alt="">
                </div>
                <div class="input">
                  <el-input type="text" v-model="form.user"></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="inputBox">
                <div class="icon">
                  <img src="@/assets/loginPass.png" alt="">
                </div>
                <div class="input">
                  <el-input type="password" v-model="form.password"></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div>
                <el-checkbox v-model="form.check">记住密码</el-checkbox>
              </div>
              <el-button @click="fn">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="image">
        <img src="@/assets/LoginContentBg.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        user: 'admin',
        password: '123456',
        check: ''
      },
      rule: {
        user: [{ required: true, message: '用户名必填' }],
        password: [{ required: true, message: '密码必填' }]
      }
    }
  },
  methods: {
    fn () {
      this.$router.push('/dashboard')
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 1000px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 900px;
    height: 500px;
    border-radius: 40px;
    box-shadow: 0 0 20px #5d5d5d54;
    background: #fff;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    .box2 {
      width: 500px;
      .logo {
        width: 100%;
        height: 136px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        img {
          height: 64px;
        }
      }
      .from {
        margin: 32px 64px 0 64px;
        .inputBox {
          margin-top: 20px;
          display: flex;
          .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            background: #eae7e7;
            border-radius: 8px 0 0 8px;
            img {
              width: 25px;
              height: 25px;
            }
          }
          .input {
            flex: 1;
            border-radius: 0 8px 8px 0;
            background-color: #f8f5f5;
            .el-input {
              margin: 0;
              height: 50px;
              ::v-deep .el-input__inner {
                height: 100%;
                border: none;
                background: transparent;
              }
            }
          }
        }
        .el-checkbox.is-checked {
          ::v-deep{
            .el-checkbox__inner {
              background-color: #FFB200;
              border-color: #FFB200
            }
            .el-checkbox__label {
              color:#FFB200 !important
            }
          }
        }
        .el-checkbox ::v-deep .el-checkbox__inner:hover {
          border-color: #FFB200 !important;
        }
        .el-button{
          width: 100%;
          height: 50px;
          border-radius: 8px;
          box-shadow: 0 2px 9px 1px rgb(255 178 0 / 47%);
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          color: #332929;
          background: #ffb200;
        }
      }
      .image {
        width: 100%;
        height: 400px;
      }
    }
  }
}
</style>
